<template>
    <div>
      <KTBlankTab v-bind:title="'Select File'">
          <template v-slot:preview>
            <b-row>
                <b-col cols="11">
                  <p>
                    Please select the files for CFG measurement, limited to XML files:
                  </p>
                  <b-form-file multiple @change="onFileSelected" accept=".xml">
                    <template slot="file-name" slot-scope="{ names }">
                      <b-badge variant="dark">{{ names[0] }}</b-badge>
                      <b-badge v-if="names.length > 1" variant="dark" class="ml-1">
                        + {{ names.length - 1 }} More files
                      </b-badge>
                    </template>
                  </b-form-file>
                </b-col>
                <b-col cols="1">
                  <div>
                    <p>
                      &nbsp;
                    </p>
                  <b-button class="mr-3" variant="outline-primary" v-on:click="CFGAnalysis">Upload</b-button>
                </div>
                </b-col>
              </b-row>
              <div class="separator separator-solid" style="margin-top: 2.25rem !important;"></div>
              <!--begin::Item-->
              <div class="d-flex align-items-center flex-lg-fill mr-5 mb-2" style="margin-top: 2rem !important;">
                <span class="mr-4">
                  <i
                    class="flaticon-confetti display-4 text-muted font-weight-bold"
                  ></i>
                </span>
                <div class="d-flex flex-column text-dark-75">
                  <span class="font-weight-bolder font-size-sm">环复杂度</span>
                  <span class="font-weight-bolder font-size-h5"
                    ><span class="text-dark-50 font-weight-bold"></span
                    >{{ code.value }}</span
                  >
                </div>
              </div>
              <!--end::Item-->
          </template>
        
        </KTBlankTab>

        <KTBlankTab v-bind:title="'AI Analysis'">
          <template v-slot:preview>
            <v-card class="mx-auto" color="#1BC5BD" dark max-width="700">
              <v-card-title>
                <v-icon large left>
                  mdi-brain
                </v-icon>
                <span class="title font-weight-light">CFG</span>
              </v-card-title>

              <v-card-text class="font-weight-bold" style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; color: #f3f6f9;">
                <ul style="margin-left: 2rem;">
                  <!-- 遍历chatGPT，根据\n\n拆分成大标题和内容 -->
                  <li v-for="(section, sectionIndex) in chatGPT.split('\n\n')" :key="sectionIndex">
                    <!-- 如果sectionIndex为0，则为大标题 -->
                    <template v-if="sectionIndex === 0">
                      <!-- 使用<b>标签加粗显示 -->
                      <b>{{ section }}</b>
                    </template>
                    <!-- 如果sectionIndex不为0，则为内容，需要进一步拆分成小标题和文本 -->
                    <template v-else>
                      <!-- 根据\n拆分成小标题和文本 -->
                      <li v-for="(item, itemIndex) in section.split('\n')" :key="itemIndex" style="margin-bottom: 0.8rem;">
                        <!-- 使用<span>标签根据情况加粗显示 -->
                        <template v-if="itemIndex === 0">
                          <span><b>{{ item }}</b></span>
                        </template>
                        <template v-else>
                          <span>{{ item }}</span>
                        </template>
                      </li>
                    </template>
                  </li>
                </ul>
              </v-card-text>

              <v-card-actions>
                <v-list-item class="grow">
                  <v-list-item-avatar color="grey darken-3">
                    <v-img
                      class="elevation-6"
                      src="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
                    ></v-img>
                  </v-list-item-avatar>

                  <v-list-item-content>
                    <v-list-item-title>Metrical Man</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-card-actions>
            </v-card>
          </template>
        </KTBlankTab>
    </div>
  </template>
  
  <script>

  import KTBlankTab from "@/view/content/BlankTab.vue";
  import { SET_BREADCRUMB } from "@/core/services/store/breadcrumbs.module";
  import{ getCFG, uploadXML, chatGPTAnalysis } from "@/api/cfg.js";

  export default {
    data() {
      return {
        files : null,
        code: {
            value: 0,
        },
        chatGPT : "AI还在努力分析中,请稍等一下哦。。。。。。",
      };
    },
    methods: {
        onFileSelected(event) {
        this.files = event.target.files
        console.log(this.files)
      },
      CFGAnalysis() {
        console.log("上传文件")
        if (!this.files) {
          return
        }
        let formData = new FormData()
        formData.append('file', this.files[0])
        uploadXML(formData).then(resp => {
          console.log("上传成功")
          let fileName = resp.data.FILENAME
          getCFG(fileName).then(resp => {
           this.code.value = resp.data.CyclomaticComplexity
          
           let formData2 = new FormData()
           formData2.append('McCabeResult', this.code.value)
           formData2.append('XMLName', fileName)
           chatGPTAnalysis(formData2).then(resp => {
               this.chatGPT = resp.data.MSG;
           })
          })
        })
      }
    },
    components: {
      KTBlankTab
    },
    mounted() {
      this.$store.dispatch(SET_BREADCRUMB, [
        { title: "CFG", route: "cfg" },
      ]);
    }
  };
  </script>
  <style>
    @import url("https://unpkg.com/dropzone@5/dist/min/dropzone.min.css");
  </style>
  